<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回到顶点</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background: palegreen;
            text-align: center;
            line-height: 50px;
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
        }
    </style>
    <script src="../util.js"></script>
</head>
<body style="height: 10000px;">
    <div>top</div>
    <script>
        class Move {
             constructor (){
                this.box = document.querySelector('div')
                this.bindEvent()
             }
             bindEvent () {
                window.onscroll = (e) =>{
                    let scrolltop = document.documentElement.scrollTop || document.body.scrollTop
                    if(scrolltop > 100){
                        this.appear()
                    }
                    if(scrolltop <= 100){
                        this.hidden()
                    }
                    this.box.onclick = () =>{
                        this.go(scrolltop)
                    }
                }
             }
             appear () {
                this.box.style.display = 'block'
             }
             hidden () {
                this.box.style.display = 'none'
             }
             go (scrolltop) {
                this.timer =  setInterval(() =>{
                    scrolltop = scrolltop - 5 -scrolltop/10
                    scrollTo(0,scrolltop)
                    if(scrolltop <=0 ){
                        clearInterval(this.timer)
                    }
                 })
             }
        }
        new Move()
        
    </script>
</body>
</html>